<template>
  <div id='areaChart' class='chartPart'></div>
</template>

<script>
import { areaData } from '@/api/index'
export default {
  data () {
    return {
      timeLineData: [],
      alarmData: {}
    }
  },
  methods: {
    init () {
      this.timeLineData = []
      this.alarmData = {}
      // 请求告警数据
      areaData().then((res) => {
        if (res.code === 200) {
          res.data.map((item) => {
            // 区域数据
            this.timeLineData.push(item.area)
            // 告警
            this.alarmData[item.area] = []
            for (let k in item) {
              if (k !== 'area') this.alarmData[item.area].push(parseInt(item[k]))
            }
            this.alarmData[item.area].reverse()
          })
        }
        if (this.timeLineData) this.areaChart()
      })
    },
    areaChart () {
      let dataMap = {}
      let that = this
      // 柱状图数据分类
      function dataFormatter (obj) {
        var pList = ['提示', '低', '中', '高', '紧急']
        var area = that.timeLineData
        var temp
        for (var k = 0; k < area.length; k++) {
          temp = obj[area[k]]
          var sum = 0
          if (temp) {
            for (var i = 0, l = temp.length; i < l; i++) {
              sum += temp[i]
              obj[area[k]][i] = {
                name: pList[i],
                value: temp[i]
              }
            }
          }
          obj[area[k] + 'sum'] = sum
        }
        return obj
      }
      // 得到每个区域的分类数据
      dataMap.dataMonth = dataFormatter(this.alarmData)
      // 柱状图颜色
      let color = ['#6db288', '#7cabe9', '#71b5cd', '#e5ad88', '#c16354']
      // 柱状图数据处理
      const alarmSeries = function () {
        let optionsData = []
        that.timeLineData.map(item => {
          let series = {
            series: [
              {
                data: dataMap.dataMonth[item],
                itemStyle: {
                  normal: {
                    barBorderRadius: [5, 5, 0, 0],
                    color: function (params) {
                      var index = params.dataIndex
                      return color[index]
                    }
                  }
                },
                label: {
                  normal: {
                    show: true,
                    position: 'top',
                    fontSize: 14,
                    fontWeight: 600
                  }
                }
              }
            ]
          }
          optionsData.push(series)
        })
        return optionsData
      }
      // 饼图数据处理
      // const pieSeries = function () {
      //   let pieData = []
      //   that.timeLineData.map(item => {
      //     let series = {
      //       name: item, value: dataMap.dataMonth[`${item}sum`]
      //     }
      //     pieData.push(series)
      //   })
      //   return pieData
      // }
      let option = {
        baseOption: {
          timeline: {
            // y: 0,
            left: '10%',
            right: '10%',
            bottom: '2%',
            width: '80%',
            axisType: 'category',
            // realtime: false,
            // loop: false,
            autoPlay: true,
            // currentIndex: 2,
            playInterval: 3000,
            data: this.timeLineData,
            label: {
              interval: 0
            }
          },
          tooltip: {},
          calculable: true,
          grid: {
            top: 80,
            bottom: 100
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: { interval: 0 },
              data: [
                '提示',
                '低',
                '中',
                '高',
                '紧急'
              ],
              splitLine: { show: false },
              axisTick: {show: false}
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisTick: {show: false}
              // max: 1000
              // max: 100
            }
          ],
          series: [
            {
              name: '告警等级',
              type: 'bar',
              barWidth: '40'
            },
            {
              name: '区域告警总数',
              type: 'pie',
              color: ['#b2a4da', '#7ac1fa', '#61c4c7', '#bdce86'],
              radius: '25%',
              center: ['65%', '25%'],
              label: {
                formatter: '{b}：{c}条'
              }
              // data: pieSeries()
            }
          ]
        },
        options: alarmSeries()
      }
      var myChart = this.$echarts.init(document.getElementById('areaChart'))
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
#mapChart {
  width: 100%;
  height: 100%;
}
</style>
